<template>
	<view>
		<!-- 虚化的背景图 -->
		<view class="position-relative bordered-element">
			<image class="w-100 filter " style="height: 300rpx;" :src="loadMore.cover" mode="aspectFill"></image>
		</view>
		<view class="px-2 bg-white position-relative">
			<view class="flex">
				<image  class="rounded mr-2" :src="loadMore.cover" style="height: 150rpx; width: 150rpx; margin-top: -75rpx;"></image>
				<text class="font-md">#{{loadMore.title}}#</text>
			</view>
			<view class="flex align-center font text-secondary mt-1">
				<text class="mr-2">动态：{{loadMore.news_count}}</text>
				<text>今日：{{loadMore.today_count}}</text>
			</view>
			<view class=" text-secondary font-md">{{loadMore.desc}}</view>
		</view>
		<divider></divider>
		<!-- 置顶 -->
		<!-- text-ellipsis放不下时会后面出现省略号 -->
		<view class="p-2 flex align-center border-bottom" v-for="(item,index) in topList" :key="index">
			<text class="iconfont icon-xihuan text-main"></text>
			<text class="font text-dark text-ellipsis">{{item.title}}</text>
		</view>
		
		<divider></divider>
		<!-- 导航 二分页 -->
		<view class="flex align-center py-2">
			<view class="flex flex-1 align-center justify-center " v-for="(item,index) in tabBars" :key="index"
			:class="index === tabIndex? 'font-lg text-main font-weight-bold' : 'font-md'" @click="changeTab(index)"
			>
				{{item.name}}
			</view>
		</view>
		<!-- 列表数据 -->
		<!-- <block v-for="(item,index) in listData" :Key="index">
			<common-list :item="item" :index="index"></common-list>
		</block> -->
		<template v-if="listData.length>0">
		<block v-for="(item,index) in listData" :Key="index">
			<common-list :item="item" :index="index"></common-list>
			<divider></divider>
		</block>
		</template>
		<template v-else>
			<nothing></nothing>
		</template>
	</view>
</template>

<script>
	// 模拟数据
	const demo = [{
								username: '鞠了个攻',
								userpic: '/static/tabbar/微信图片_20240418093242.jpg', //头像
								newstime: '2024.4.28 9:07',
								isFollow: false, //当前是否被关注
								title: '鞠婧祎',
								titlepic: '/static/tabbar/cb840149d59e4d666b10f13c60a9d8d.jpg', //帖子主图
								support: {
									type: 'support',
									support_count: 30, //赞
									unsupport_count: 1, //踩
								},
								comment_count: 3, //评论
								share_num: 15 //转发
							},
							{
								username: '鞠婧祎超话',
								userpic: '/static/tabbar/jjy2.jpg',
								newstime: '2024.4.24 9:01',
								isFollow: false,
								title: '鞠婧祎',
								titlepic: '/static/tabbar/jjy9.jpg',
								support: {
									type: 'support',
									support_count: 844,
									unsupport_count: 11,
								},
								comment_count: 551,
								share_num: 732
							},
							{
								username: 'TNB_k.鞠婧祎',
								userpic: '/static/tabbar/jjy3.jpg',
								newstime: '2024.4.23 3:24',
								isFollow: false,
								title: '鞠婧祎',
								titlepic: '/static/tabbar/jjy1.jpg',
								support: {
									type: 'support',
									support_count: 1115,
									unsupport_count: 15,
								},
								comment_count: 831,
								share_num: 999
							}
	]
	import divider from '../../components/common/divider.vue'
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import commonList from "@/components/common/common-list.vue"
	import loadMore from '@/components/common/load-more.vue'
	import hotCate from '@/components/news/hot-cate.vue';
	export default {
		components:{
			divider,
			uniNavBar,
			commonList,
			loadMore,
			hotCate
			
		},
		// 计算属性 要计算得到结果“方法的特性” 带缓存
		computed:{
			listData(){
				if(this.tabIndex === 0){
					return this.list1
				}
				return this.list2
			}
		},
		data() {
			return {
				//分页数据
				tabBars: [{
						name: "默认"
					},
					{
						name: "最新"
					}
				],
				// 存放置顶数据
				topList:[{
					title:"【置顶】置顶话题41856188961111111111111111111111111111111111111"
				}
				],
				//盛放默认选项卡的数据
				list1:[],
				//盛放最新选项卡中的数据 因为最新 是要要求服务器中按时间序排列好的
				list2:[],
				//选中项
				loadMore:[],
				tabIndex: 0,
				
			}
		},
		onLoad(e) {
			// console.log(e.detail);
			if (e.detail) {
				let res = JSON.parse(e.detail);
				// console.log(res);
				 this.loadMore =res;
			}
			this.list1 = demo
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index
			}
		},
		

	}
</script>

<style>
	/* 模糊图片 */
	.filter {
		filter: blur(3px);
	}
	.bordered-element{
		  border-width: 0px 0px 1px 0px; /* 顺序为上右下左 */
		   border-style: solid;  
	}
	
	
</style>